import { returnElement } from "@/utils";
import antdList from "./type";
import { useState } from "react";
import "./index.scss";

const LeftMaterial = (props: { clearLocation: () => void }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <div className="leftMaterial" onDrag={props.clearLocation}>
      <div className="leftMaterial-tab">
        {antdList.map((item, index) => {
          return (
            <div
              key={index}
              className={`leftMaterial-tab-item ${
                currentIndex === index ? "leftMaterial-tab-item-active" : ""
              }`}
              onClick={() => setCurrentIndex(index)}
            >
              <div>{item.type}</div>
            </div>
          );
        })}
      </div>
      <div className="leftMaterial-component">
        {antdList[currentIndex].children.map((child, index) => {
          return (
            <div
              className="leftMaterial-component-item"
              key={`${currentIndex}-${index}-${child.element}-${child.props.type}`}
            >
              {returnElement({
                ...child,
                // @ts-expect-error 该值由用户拖拽决定，该值只会是组件名称
                props: { ...child.props, draggable: true },
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
};
export default LeftMaterial;
